<template>
    <div class="flyDuck-app-home-main-page">
        <!--搜索区域-->
        <div class="flyDuck-app-home-main-page-query">
            <el-form ref="queryForm" :model="queryParam" :inline="true">
                <el-form-item label="昵称" prop="nickName">
                    <el-input v-model="queryParam.nickName" size="small" @keydown.enter.native="getUserTableData"  placeholder="请输入昵称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="getUserTableData" icon="el-icon-search">搜索</el-button>
                    <el-button size="mini" @click="resetQuery" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--按钮区域-->
        <div class="flyDuck-app-home-main-page-button">
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" size="mini" icon="el-icon-plus" v-has="'/system/sysUserController/addUser'" @click="openAddDialog">新增</el-button>
                </el-col>
            </el-row>
        </div>
        <!--表格区域-->
        <div class="flyDuck-app-home-main-page-table">
            <el-table :data="userTableData"  size="mini" height="400px" >
                <el-table-column align="center" label="序号" type="index" width="70">
                    <template slot-scope="scope">
                        <span>{{ (page - 1) * size + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="nickName" label="昵称" width="100"></el-table-column>
                <el-table-column align="center" prop="userName" label="用户名" width="100"></el-table-column>
                <el-table-column align="center" prop="deptName" label="部门" width="150"></el-table-column>
                <el-table-column align="center" prop="status" label="状态" :formatter="statusFormatter"></el-table-column>
                <el-table-column align="center" prop="email" label="邮箱" width="200px"></el-table-column>
                <el-table-column align="center" prop="phone" label="手机"></el-table-column>
                <el-table-column align="center" prop="sex" :formatter="sexFormatter" label="性别"></el-table-column>
                <el-table-column align="center" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="openEditDialog(scope.row)" v-has="'/system/sysUserController/updateUser'">编辑</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteUser(scope.row)" v-has="'/system/sysUserController/deleteUser'">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--分页区域-->
        <div class="flyDuck-app-home-main-page-pagination">
            <el-pagination @current-change="currentChange" @size-change="sizeChange" background layout='sizes, prev, pager, next, jumper, ->, total' :total="total"></el-pagination>
        </div>
        <!--弹窗-->
        <div class="flyDuck-app-home-main-page-dialog">
            <el-dialog :title="title" :visible.sync="dialogVisible">
                <el-form ref="userForm" :rules="rules" :model="userForm"  :validate-on-rule-change="false" label-width="80px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="用户名" prop="userName">
                                <el-input v-model="userForm.userName" placeholder="请输入用户名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="昵称" prop="nickName">
                                <el-input v-model="userForm.nickName" placeholder="请输入昵称"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="性别" prop="sex">
                                <el-select v-model="userForm.sex" clearable placeholder="请选择性别">
                                    <el-option  v-for="item in sexOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="userForm.email" placeholder="请输入邮箱"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="电话" prop="phone">
                                <el-input v-model="userForm.phone" placeholder="请输入电话"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="状态" prop="status">
                                <el-switch style="margin-top: 10px" v-model="userForm.status" active-value="1" inactive-value="2" active-color="#13ce66" ></el-switch>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="部门" prop="deptId">
                                <treeselect v-model="userForm.deptId" clearable :options="deptTreeOptions" :normalizer="normalizer" placeholder="选择上级部门" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="角色" prop="roleIds">
                                <el-select clearable multiple v-model="userForm.roleIds" placeholder="请选择">
                                    <el-option v-for="item in roleOptions" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="职位" prop="postIds">
                                <el-select clearable multiple v-model="userForm.postIds" placeholder="请选择">
                                    <el-option v-for="item in postOptions" :key="item.id" :label="item.postName" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="头像" prop="avatar">
                                <SingleUpload v-model="userForm.avatar"></SingleUpload>
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    import SingleUpload from '@/components/upload/singleUpload'
    import {getUserPageList,getUserDetail,addUser,updateUser,deleteUser} from '@/api/system/user'
    import {getDeptTreeSelect} from '@/api/system/dept'
    import {getDictOptionList} from '@/api/system/dict'
    import {getRoleSelect} from '@/api/system/role'
    import {getPostSelect} from '@/api/system/post'
    export default {
        components:{Treeselect ,SingleUpload},
        name: "SysUser",
        data() {
            return {
                /*搜索区域*/
                queryParam:{
                    nickName:'',
                },
                /*按钮区域*/
                /*表格区域*/
                userTableData:[],
                /*分页区域*/
                total:0,
                page:1,
                size:10,
                /*弹窗区域*/
                dialogVisible:false,
                title:'',
                userForm:{
                    id:null,
                    deptId: null,
                    email: '',
                    nickName: '',
                    phone: '',
                    avatar:'',
                    sex: '',
                    status: '1',
                    userName: '',
                    roleIds:[],
                    postIds:[],
                },
                sexOptions:[],
                statusOptions:[],
                deptTreeOptions:[],
                roleOptions:[],
                postOptions:[],
                rules:{
                    nickName:[{required:true, message:'请输入昵称', trigger:'blur'}],
                    userName:[{required:true, message:'请输入用户名', trigger:'blur'}],
                    avatar:[{required:true, message:'请选择头像', trigger:'blur'}],
                    phone:[
                        {required:true, message:'请输入用户名', trigger:'blur'},
                        {pattern:/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/, message:'手机号码格式不正确', trigger:'blur'},
                    ],
                    sex:[{required:true, message:'请选择性别', trigger:'change'}],
                    email:[
                        {required:true, message:'请输入邮箱', trigger:'blur'},
                        {type:"email", message:'邮箱格式不正确', trigger:'blur'},
                    ],
                    deptId:[{required:true, message:'请选择部门', trigger:'change'}],
                    roleIds:[{ type: 'array', required: true, message: '请至少选择一个角色', trigger: 'change' }],
                    postIds:[{ type: 'array', required: true, message: '请至少选择一个职位', trigger: 'change' }],
                },
            };
        },
        mounted() {
            this.getUserTableData();
            this.getDeptTree();
            this.getPostOptions();
            this.getRoleOptions();
            this.getSexOptions();
            this.getStatusOptions();
        },
        methods: {
            /*搜索区域*/
            /*按钮区域*/
            openAddDialog(){
                this.title = '添加用户';
                this.resetUserForm();
                this.dialogVisible = true;
            },
            resetUserForm(){
                this.userForm = {
                    id:null,
                    password:'',
                    deptId: null,
                    email: '',
                    nickName: '',
                    phone: '',
                    sex: '',
                    status: '1',
                    userName: '',
                    roleIds:[],
                    postIds:[],
                    avatar:''
                };
            },
            async openEditDialog(data){
                debugger
                this.title = '编辑用户';
                //回显
                await getUserDetail(data.id).then(data => {
                    this.userForm = data;
                })
                this.dialogVisible = true;

            },
            resetQuery(){
                this.queryParam.nickName = '';
                this.page = 1;
                this.getUserTableData();
            },
            /*表格区域*/
            sexFormatter(row, column) {
                return this.selectDictLabel(this.sexOptions, row.sex);
            },
            statusFormatter(row, column) {
                return this.selectDictLabel(this.statusOptions, row.status);
            },
            getSexOptions(){
                getDictOptionList(`sys_user_sex`).then(data => {
                    this.sexOptions = data;
                })
            },
            getStatusOptions(){
                getDictOptionList(`status`).then(data => {
                    this.statusOptions = data;
                })
            },
            getUserTableData(){
                getUserPageList(this.queryParam,this.page,this.size).then(data=>{
                    this.userTableData = data.rows;
                    this.total = data.total;
                })
            },
            deleteUser(data){
                this.$confirm(`是否删除${data.nickName}?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteUser(data.id).then(data=>{
                        if(data){
                            this.getUserTableData();
                        }
                    })
                })
            },
            /*分页区域*/
            currentChange(currentPage){
                this.page = currentPage;
                this.getUserTableData();
            },
            sizeChange(size){
                this.size = size;
                this.getUserTableData();
            },
            /*弹窗区域*/
            getDeptTree(){
                var params = {};
                getDeptTreeSelect().then(data=>{
                    this.deptTreeOptions = data;
                })
            },
            normalizer(node) {
                if (node.children && !node.children.length) {
                    delete node.children;
                }
                return {
                    id: node.id,
                    label: node.deptName,
                    children: node.children
                };
            },
            getRoleOptions(){
                var params = {};
                getRoleSelect().then(data=>{
                    this.roleOptions = data;
                })
            },
            getPostOptions(){
                var params = {};
                getPostSelect().then(data=>{
                    this.postOptions = data;
                })
            },
            submitForm(){
                if(this.userForm.id){
                    //修改
                    this.$refs['userForm'].validate(valid=>{
                        if(valid){
                            updateUser(this.userForm).then(data => {
                                if(data){
                                    this.dialogVisible = false;
                                    this.getUserTableData();
                                }
                            })
                        }
                    })
                }else {
                    //添加
                    this.$refs['userForm'].validate(valid=>{
                        if(valid){
                            addUser(this.userForm).then(data => {
                                if(data){
                                    this.dialogVisible = false;
                                    this.getUserTableData();
                                }
                            })
                        }
                    })
                }


            },
        },
    }
</script>
<style>
</style>

